<div class="fileUpload" ng-controller="FileUploadCtrl">
    <div class="page-wrapper">
        <h2>Num of file: {{ uploader.queue.length }}</h2>

        <div class="file-wrapper">
            <div class="file-select" ng-animate="'animate-fade'" ng-show="!uploader.queue.length">
                <input class="file-input" ng-file-select="uploader" type="file"/>

                <div class="well file-drop" ng-file-over="uploader"><span>Drop or select your photo here!</span></div>
            </div>
            <div class="file-preview" ng-animate="'animate-fade'" ng-repeat="item in uploader.queue">
                <div class="file-thumb" ng-show="controller.isImage(item.file)">
                    <div class="file-thumb" ng-show="uploader.isHTML5"
                         ng-thumb="{ file: item.file, height: 200 }"></div>
                </div>
                <div class="file-label">
                    <span class="file-name-limit">File: {{ item.file.name }} </span> <span>{{ item.file.size/1024/1024|number:2 }} Mb</span>
                </div>
                <div class="file-btn-remove" ng-click="uploader.clearQueue()"
                     ng-disabled="!uploader.queue.length"></div>
                <div class="total-progress-box">
                    <div class="total-progress transit" ng-style="{ 'width': uploader.progress + '%' }"></div>
                </div>
            </div>
        </div>
        <div>
            <button ng-click="updateProduct()" ng-disabled="!uploader.getNotUploadedItems().length">Upload</button>
            <button ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">Cancel</button>
        </div>
    </div>
</div>